<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>接口列表</title>
<%@include file="../public.jsp"%>
<script src="<%=path %>/js/api/api.js"></script>
</head>
<body>
	<input type="hidden" id="proId" value="${proId}">
	<%@include file="../head.jsp"%>
	<%@include file="../project/menu.jsp"%>
	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="<%=path %>/index"><span
						class="glyphicon glyphicon-home"></span></a></li>
				<li><a href="<%=path %>/project">项目列表</a></li>
				<li class="active">${project.name}</li>
			</ol>
		</div>
		<!--/.row-->
	</div>
	<!--/.main-->
	<br>
	<br>
	<br>
	<br>
	<div class="container">
		<div class="col-lg-6">
			<div class="input-group"
				style="position: absolute; margin-left: 200px;">
				<input type="text" class="form-control" id="condition"
					name="condition" value="${condition}"> <span
					class="input-group-btn"> <a class="btn btn-primary"
					id="searchApi">搜索</a>
				</span>
			</div>
		</div>
		<!-- end -->

		<!-- 添加API的按钮 -->
		<button class="btn btn-success" type="button" data-toggle="modal"
			data-target="#addApiModal"
			style="position: absolute; margin-left: 515px">新增</button>
		<!-- end -->

		<!-- 添加API弹窗 -->
		<div class="modal fade" id="addApiModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 700px; height: 500px;">
				<form role="form" action="<%=path %>/project/${proId}/api/save"
					id="apiForm" method="post">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel" align="center">
								创建API</h4>
						</div>
						<div class="modal-body"
							style="overflow-y: auto; width: 697px; height: 400px;">

							<dl class="dl-horizontal" style="float: left;">
								<dt>接口名称</dt>
								<dd>
									<div style="width: 350px;">
										<input type="text" class="form-control" id="api_name"
											name="name" required="required" onblur="post(api_name)"
											placeholder="请输入接口名称"><span id="api_name1"
											style="color: red;"></span><br>
									</div>
								</dd>
								<c:if test="${!project.textOnly}">
								<dt>数据表</dt>
								<dd>
									<c:if test="${list!= null || fn:length(list) != 0}">
									<select class="form-control" name="tableName">
										<c:forEach items="${list}" var="list">
										   <option value="${list}"> 
										       ${list} 
										   </option>
										</c:forEach>
									</select>
									</c:if>
									<c:if test="${list== null || fn:length(list) == 0}">
									<input type="text" class="form-control" name="tableName"
										required="required" placeholder="请输入表名">
									</c:if>
									<br>
								</dd>
								
								<dt>
									<label for="name">表标识</label>
								</dt>
								<dd>
									<select class="form-control" name="tableFlag">
										<option selected="selected">默认</option>
										<option>yyyyMMdd</option>
										<option>yyyyMM</option>
										<option>yyyy</option>
									</select><br>
								</dd>
								
								<dt>
									<label for="name">分隔符</label>
								</dt>
								<dd>
									<input type="text" class="form-control" 
										name="separatorValue"><br>
								</dd>
								</c:if>
								<dt>请求url</dt>
								<dd>
									<input type="text" class="form-control" name="requestUrl"
										id="api_url" required="required" onblur="post(api_url)"
										placeholder="例如:/user/find"><span id="api_url1"
										style="color: red;"></span><br>
								</dd>

								<dt>
									<label for="name">请求方式</label>
								</dt>
								<dd>
									<select class="form-control" name="requestType">
										<option selected="selected">GET</option>
										<option>POST</option>
										<option>PUT</option>
										<option>DELETE</option>
										<option>PATCH</option>
										<option>HEADER</option>
									</select><br>
								</dd>

								<dt>
									<label for="name">请求格式</label>
								</dt>
								<dd>
									<select class="form-control" name="requestFormat">
										<option selected="selected">application/json</option>
										<option>application/xml</option>
										<option>text/html</option>
										<option>text/plain</option>
									</select><br>
								</dd>

								<dt>
									<label for="name">响应格式</label>
								</dt>
								<dd>
									<select class="form-control" name="responseFormat">
										<option selected="selected">application/json</option>
										<option>application/xml</option>
										<option>text/html</option>
										<option>text/plain</option>
									</select><br>
								</dd>

								<dt>
									<label for="name">返回值类型</label>
								</dt>
								<dd>
									<select class="form-control" name="responseDataType">
										<option selected="selected">list</option>
										<option>object</option>
										<option>count</option>
									</select><br>
								</dd>

								<dt>
									<label for="name">排序权重</label>
								</dt>
								<dd>
									<input type="text" class="form-control" name="sort" id="api_sort"
										required="required" placeholder="请输入数字"
										onblur="checkSort(api_sort)"><br>
								</dd>

								<dt>
									<label for="name">描述信息</label>
								</dt>
								<dd>
									<textarea class="form-control" rows="4" name="description"
										required="required" placeholder="介绍一下你创建的接口"></textarea>
								</dd>
								
								<br>
								<dt>
									<label for="name">所属模块</label>
								</dt>
							    <dd>
									<select class="form-control" name="moduleName">
									 <c:forEach items="${modules}"  var = "module" >
										<option >${module.name}</option>
										</c:forEach> 
										</select><br>
										
								</dd>

							</dl>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">关闭</button>
							<button type="submit" class="btn btn-primary">保存</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</form>
			</div>
			<!-- /.modal -->
		</div>
		<!-- end -->

		<!-- 更新API弹窗 -->
		<div class="modal fade" id="updateApiModal" tabindex="-1"
			role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 700px; height: 500px;">
				<form role="form" action="<%=path %>/project/${proId}/api/update"
					id="apiForm" method="post">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel" align="center">
								更新API</h4>
						</div>
						<div class="modal-body"
							style="overflow-y: auto; width: 697px; height: 400px;">
							<input type="hidden" id="apiId" name="id" value="">

							<dl class="dl-horizontal" style="float: left;">

								<dt>
									<label for="name">接口名称</label>
								</dt>
								<dd>
									<div style="width: 350px;">
										<input type="text" class="form-control" id="name" name="name"
											required="required"><br>
									</div>
								</dd>
								
								<c:if test="${!project.textOnly}">
								<dt>
									<label for="name">数据表</label>
								</dt>
								<dd>
									<input type="text" class="form-control" id="tableName"
										name="tableName" required="required"><br>
								</dd>
								
								<dt>
									<label for="name">表标识</label>
								</dt>
								<dd>
									<select class="form-control" name="tableFlag" id="tableFlag">
										<option>默认</option>
										<option>yyyyMMdd</option>
										<option>yyyyMM</option>
										<option>yyyy</option>
									</select><br>
								</dd>
								
								<dt>
									<label for="name">分隔符</label>
								</dt>
								<dd>
									<input type="text" class="form-control" id="separatorValue"
										name="separatorValue"><br>
								</dd>
								</c:if>
								
								<dt>
									<label for="name">请求url</label>
								</dt>
								<dd>
									<input type="text" class="form-control" id="requestUrl"
										name="requestUrl" required="required"><br>
								</dd>

								<dt>
									<label for="name">请求方式</label>
								</dt>
								<dd>
									<select class="form-control" id="requestType"
										name="requestType">
										<option selected="selected">GET</option>
										<option>POST</option>
										<option>PUT</option>
										<option>DELETE</option>
										<option>PATCH</option>
										<option>HEADER</option>
									</select><br>
								</dd>

								<dt>
									<label for="name">请求格式</label>
								</dt>
								<dd>
									<select class="form-control" id="requestFormat"
										name="requestFormat">
										<option selected="selected">application/json</option>
										<option>application/xml</option>
										<option>text/html</option>
										<option>text/plain</option>
									</select><br>
								</dd>

								<dt>
									<label for="name">响应格式</label>
								</dt>
								<dd>
									<select class="form-control" id="responseFormat"
										name="responseFormat">
										<option selected="selected">application/json</option>
										<option>application/xml</option>
										<option>text/html</option>
										<option>text/plain</option>
									</select><br>
								</dd>

								<dt>
									<label for="name">返回值类型</label>
								</dt>
								<dd>
									<select class="form-control" id="responseDataType"
										name="responseDataType">
										<option selected="selected">list</option>
										<option>object</option>
										<option>count</option>
									</select><br>
								</dd>

								<dt>
									<label for="name">排序权重</label>
								</dt>
								<dd>
									<input type="text" class="form-control" id="sort" name="sort"
										required="required"><br>
								</dd>

								<dt>
									<label for="name">描述信息</label><br>
								</dt>
								<dd>
									<textarea class="form-control" rows="4" id="description"
										name="description" required="required"></textarea>
								</dd>
								<br>
								<dt>
									<label for="name">所属模块</label>
								</dt>
							    <dd>
									<select class="form-control" name="moduleName" id="moduleName">
									 <c:forEach items="${modules}"  var = "module" >
										<option >${module.name}</option>
										</c:forEach> 
										</select><br>
										
								</dd>
								

							</dl>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">关闭</button>
							<button type="submit" class="btn btn-primary">保存</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</form>
			</div>
			<!-- /.modal -->
		</div>
		<!-- end -->

		<br>
		<br>
		<br>

		<!-- 表格 -->
		<!-- 表格 -->
		<div class="ApiList1" style="position: static; margin-left: 217px">
			<table class="table table-bordered" style="width: 100%;">
				<thead>
					<tr>
						<th style="width: 5%">#</th>
						<th style="width: 15%">名称</th>
						<th style="width: 11%">请求url</th>
						<th style="width: 10%">请求方式</th>
						<th style="width: 16%">描述</th>
						<th style="width: 6%">所属模块</th>
						<th style="width: 6%">权重</th>
						<th style="width: 17%">创建时间</th>
						<th style="width: 12%">操作</th>
					</tr>
				</thead>
				<tbody id="apiList">

				</tbody>
			</table>
			<!-- end -->
			<div id="pagination"></div>
		</div>
		
			</div>
</body>
</html>